<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript">
        window.onload=function()
        {
            //获取input和btn
            var input=document.getElementById("number");
            var btn=document.getElementById("btn");
            //console.log(input);
            btn.onclick=function()
            {
                var number=input.value;

                //创建一个Worker()的实例对象并向它传递将在新线程中执行的JS脚本的URL
                var worker=new Worker("./JS/web-worker.js");
                //向分线程发送消息
                worker.postMessage(number);
                console.log("主线程向分线程发送数据："+number)
                //绑定接收消息的监听
                worker.onmessage=function(event)
                {
                    console.log("主线程接收分线程返回的数据："+event.data);
                }
            };
        };
    </script>
</head>
<body>
    <!--
        1.H5规范提供了JS分线程的实现，取名为：Web Workers
        2.相关API
            Worker：构造函数，加载分线程执行的JS文件
            Worker.prototype.onmessage：用于接受另一个线程的回调函数
            Worker.prototype.postMessage：向另一个线程发送消息
        3.不足
            worker内代码不能操作DOM（更新UI）
            不能跨域加载JS
            不是每个浏览器都支持这个新特性
    -->
    <input type="text" placeholder="数值" id="number">
    <button id="btn">计算</button>

    <!--
        介绍：Web Workers是HTML5提供的一个javascript多线程解决方案
        我们可以将一些大计算量的代码交由Web Worker运行而不冻结用户界面
        但是子线程完成受主线程控制，且不得操作DOM。所以这个新标准并没有改变JavaScript单线程的本质
    -->
</body>
</html>